{{extend '../layouts/main.html'}}


{{block 'css'}}
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
{{/block}}


{{block 'main'}}
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>热门影片添加</h5>
        </div>
        <div class="ibox-content">
          <form class="form-horizontal m-t" id="addHot" method="POST">
            <div class="form-group">
              <label class="col-sm-3 control-label">影片名称：</label>
              <div class="col-sm-8">
                <input name="title" class="form-control" type="text">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">演员：</label>
              <div class="col-sm-8">
                <input name="actor" class="form-control" type="text">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">日期：</label>
              <div class="col-sm-8">
                <input name="dt" class="form-control" type="text" value="2020-11-20">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">封面：</label>
              <div class="col-sm-4">
                <!-- <input name="file" class="form-control" type="file"> -->
                <!-- 异步文件上传 -->
                <div id="picker">选择封面图片上传</div>
              </div>
              <div class="col-sm-4">
                <!-- 隐藏域 有表单域能力，但你还看不到它 -->
                <input type="hidden" name="pic" id="pic">
                <img src="" id="showpic" style="width:100px;">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">影片名称：</label>
              <div class="col-sm-8">
                <textarea name="body" class="form-control" rows="10"></textarea>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-8 col-sm-offset-3">
                <button class="btn btn-primary" type="submit">添加影片</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>
{{/block}}

{{block 'js'}}
<!-- jquery-validation类库 -->
<script src="/admin/js/plugins/validate/jquery.validate.min.js"></script>
<!-- 汉化语言包 -->
<script src="/admin/js/plugins/validate/messages_zh.min.js"></script>

<!-- 文件上传 -->
<script type="text/javascript" src="/webuploader/webuploader.js"></script>

<script>
  // 表单前端验证
  $( "#addHot" ).validate( {
    // 规则
    rules: {
      // 表单域名称
      title: {
        // 规则名:规则
        required: true,
        isa: true
      }
    },
    // 验证提示
    messages: {
      // 表单域名称
      title: {
        // 规则名称：提示消息
        required: '影片名称不能为空'
      }
    }
  } )

  // 自定义验证规则
  // 参数1：规则名
  // 参数2：回调方法 表单数据  表单元素
  jQuery.validator.addMethod( "isa", function ( value, element ) {
    var preg = /a/;
    return this.optional( element ) || ( !preg.test( value ) );
  }, "影片名称中不能有a" );

  // 文件上传类
  let uploader = WebUploader.create( {
    // 选完文件后，是否自动上传
    auto: true,
    // swf文件路径
    swf: '/static/webuploader/Uploader.swf',
    // 文件接收服务端
    server: '/admin/upfile',
    // 选择文件的按钮
    pick: '#picker',
    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false
  } );

  // 文件上传成功后事件
  uploader.on( 'uploadSuccess', function ( file, data ) {
    // 设置图片中的src属性
    $( '#showpic' ).attr( 'src', data.pic )
    // 上传到数据表中的封面图片地址
    $( '#pic' ).val( data.pic )
  } );
</script>

{{/block}}